<template>
  <view class="lt-container">
  
    <view class="bg-layer">
      <view class="bg-grid"></view>
      <text class="bg-watermark">RHODES // SYSTEM</text>
    </view>

    <view class="status-header">
      <view class="status-left">
        <view class="blink-dot"></view>
        <text>TERMINAL ONLINE</text>
      </view>
      <text class="status-right">SYNC: 100%</text>
    </view>

    <view class="swiper-section">
      <view class="swiper-frame">
        <view class="corner tl"></view><view class="corner tr"></view>
        <view class="corner bl"></view><view class="corner br"></view>
        
        <swiper 
          class="main-swiper" 
          :indicator-dots="true" 
          :autoplay="true" 
          :interval="4000" 
          :duration="500"
          indicator-color="rgba(255,255,255,0.3)"
          indicator-active-color="#79BBA9"
        >
          <swiper-item v-for="(item, index) in bannerList" :key="index">
            <view class="swiper-item-content">
              <view class="placeholder-img" :style="{background: item.color}">
                <text class="img-text">{{ item.title }}</text>
              </view>
              <view class="slide-overlay">
                <text class="slide-tag">NEWS // 0{{ index + 1 }}</text>
              </view>
            </view>
          </swiper-item>
        </swiper>
      </view>
    </view>

    <view class="function-section">
      <view class="section-label">
        <text>SHORTCUTS // 快捷功能</text>
        <view class="line"></view>
      </view>
      
      <view class="grid-box">
        <view 
          class="grid-item" 
          v-for="(item, index) in functionList" 
          :key="index"
          @click="handleNav(item.path)"
        >
          <view class="icon-wrapper">
            <text class="icon-text">{{ item.iconChar }}</text>
            <view class="icon-deco"></view>
          </view>
          <text class="item-name">{{ item.name }}</text>
          <text class="item-sub">MODULE 0{{index+1}}</text>
        </view>
      </view>
    </view>

    <view style="height: 140rpx;"></view>
<LoneTrailTabBar :current="0"></LoneTrailTabBar>

    <!-- <view class="custom-tabbar">
      <view class="tab-item active">
        <view class="tab-icon-box">
          <text class="tab-icon">HOME</text>
        </view>
        <text class="tab-label">首页</text>
      </view>
      
      <view class="tab-divider"></view>

      <view class="tab-item" @click="handleNav('/pages/interview/interview')">
        <view class="tab-icon-box">
          <text class="tab-icon">USER</text>
        </view>S
        <text class="tab-label">个人中心</text>
      </view>
    </view> -->

  </view>
</template>

<script>
	import LoneTrailTabBarVue from '@/uview-ui/components/LoneTrailTabBar/LoneTrailTabBar.vue';
	
export default {
	components: {
	   LoneTrailTabBar: LoneTrailTabBarVue
	  },
	  onShow() {
	      uni.hideTabBar(); // 隐藏原生 TabBar
	    },
  data() {
    return {
      // 轮播图数据
      bannerList: [
        { title: 'LONE TRAIL EVENT', color: '#3d4e6b' }, // 模拟图片
        { title: 'NEW OPERATORS', color: '#5c4d4d' },
        { title: 'SYSTEM UPDATE', color: '#3d6b54' }
      ],
      // 功能区数据
      functionList: [
        { name: '功能一', iconChar: 'A', path: '/pages/interview/interview' },
        { name: '简历管理', iconChar: 'B', path: '/pages/resume/resume' },
        { name: '功能三', iconChar: 'C', path: '/pages/interview/interview' },
        { name: '功能四', iconChar: 'D', path: '/pages/interview/interview' }
      ]
    }
  },
  methods: {
    // 统一跳转方法
    handleNav(url) {
      // 增加震动反馈，提升机械感
      uni.vibrateShort();
      
      // 判断是跳转普通页面还是 TabBar 页面
      // 如果 interview 是在 pages.json 的 tabBar 里定义的，必须用 switchTab
      // 这里默认用 navigateTo，如果报错请改用 switchTab
      uni.navigateTo({
        url: url,
        fail: () => {
          // 如果跳转失败(可能是因为目标是tab页面)，尝试 switchTab
          uni.switchTab({ url: url });
        }
      });
    }
  }
}
</script>

<style lang="scss" scoped>
/* === 孤星风格变量 === */
$lt-bg: #E0E2E5;
$lt-card: rgba(255, 255, 255, 0.9);
$lt-text: #1a1a1a;
$lt-sub: #666;
$c-green: #79BBA9;
$c-yellow: #E6A73C;
$c-red: #9A332D;

/* 基础容器 */
.lt-container {
  min-height: 100vh;
  background-color: $lt-bg;
  font-family: Helvetica, sans-serif;
  position: relative;
  color: $lt-text;
}

/* 背景装饰 */
.bg-layer {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0;
  pointer-events: none; overflow: hidden;
}
.bg-grid {
  width: 100%; height: 100%;
  background-image: 
    linear-gradient(rgba(0,0,0,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.03) 1px, transparent 1px);
  background-size: 40rpx 40rpx;
}
.bg-watermark {
  position: absolute; top: 120rpx; right: -40rpx;
  font-size: 120rpx; font-weight: 900; color: rgba(0,0,0,0.03);
  transform: rotate(90deg);
}

/* 顶部状态栏 */
.status-header {
  position: relative; z-index: 10;
  display: flex; justify-content: space-between; align-items: center;
  padding: 20rpx 40rpx;
  background: rgba(255,255,255,0.5);
  backdrop-filter: blur(5px);
  border-bottom: 2rpx solid rgba(0,0,0,0.05);
}
.status-left {
  display: flex; align-items: center; font-size: 24rpx; font-weight: bold; letter-spacing: 2rpx;
}
.blink-dot {
  width: 12rpx; height: 12rpx; background: $c-green; border-radius: 50%; margin-right: 15rpx;
  animation: blink 2s infinite;
}
.status-right { font-size: 20rpx; font-family: monospace; color: $lt-sub; }

/* 轮播图 */
.swiper-section {
  position: relative; z-index: 10;
  padding: 40rpx;
}
.swiper-frame {
  position: relative;
  padding: 10rpx; /* 内边距给角标留位置 */
}
/* 装饰角标 */
.corner { position: absolute; width: 30rpx; height: 30rpx; border: 4rpx solid $c-green; pointer-events: none; }
.tl { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.tr { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.bl { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.br { bottom: 0; right: 0; border-left: 0; border-top: 0; }

.main-swiper {
  height: 600rpx; /* 对应“大幅度页面” */
  border-radius: 4rpx;
  overflow: hidden;
  box-shadow: 0 20rpx 40rpx rgba(0,0,0,0.1);
  /* 切角 */
  clip-path: polygon(30rpx 0, 100% 0, 100% calc(100% - 30rpx), calc(100% - 30rpx) 100%, 0 100%, 0 30rpx);
}
.swiper-item-content { width: 100%; height: 100%; position: relative; }
.placeholder-img {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
}
.img-text { font-size: 60rpx; font-weight: 900; color: rgba(255,255,255,0.2); letter-spacing: 10rpx; }
.slide-overlay {
  position: absolute; bottom: 0; left: 0; width: 100%;
  padding: 20rpx 30rpx;
  background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
}
.slide-tag { color: #fff; font-size: 24rpx; font-family: monospace; letter-spacing: 2rpx; }

/* 功能区 */
.function-section {
  position: relative; z-index: 10;
  padding: 0 40rpx;
}
.section-label {
  display: flex; align-items: center; margin-bottom: 30rpx;
  font-size: 24rpx; font-weight: bold; color: $lt-sub; letter-spacing: 2rpx;
}
.line { flex: 1; height: 2rpx; background: rgba(0,0,0,0.1); margin-left: 20rpx; }

.grid-box {
  display: flex; justify-content: space-between;
}
.grid-item {
  width: 23%;
  display: flex; flex-direction: column; align-items: center;
}
.icon-wrapper {
  width: 100rpx; height: 100rpx;
  background: $lt-card;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 15rpx;
  position: relative;
  box-shadow: 0 10rpx 20rpx rgba(0,0,0,0.05);
  /* 六边形切角 */
  clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
  transition: transform 0.1s;
}
.grid-item:active .icon-wrapper { transform: scale(0.95); background: #fff; }
.icon-text { font-size: 48rpx; font-weight: 900; color: $c-yellow; }
.icon-deco {
  position: absolute; bottom: 0; right: 0; width: 0; height: 0;
  border-style: solid; border-width: 0 0 15rpx 15rpx;
  border-color: transparent transparent $c-green transparent;
}
.item-name { font-size: 26rpx; font-weight: bold; color: $lt-text; margin-bottom: 4rpx; }
.item-sub { font-size: 18rpx; color: $lt-sub; font-family: monospace; transform: scale(0.9); }


/* 底部导航栏 */
.custom-tabbar {
  position: fixed; bottom: 40rpx; left: 40rpx; right: 40rpx;
  height: 120rpx;
  background: rgba(20, 20, 20, 0.9); /* 深色底 */
  backdrop-filter: blur(10px);
  z-index: 100;
  display: flex; justify-content: space-around; align-items: center;
  /* 孤星切角 */
  clip-path: polygon(30rpx 0, 100% 0, 100% calc(100% - 30rpx), calc(100% - 30rpx) 100%, 0 100%, 0 30rpx);
  box-shadow: 0 10rpx 30rpx rgba(0,0,0,0.3);
}

.tab-item {
  flex: 1; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: #888;
  transition: all 0.3s;
}
.tab-item:active { background: rgba(255,255,255,0.1); }
.tab-item.active { color: $c-green; }
.tab-item.active .tab-icon-box { border-color: $c-green; background: rgba(121, 187, 169, 0.1); }

.tab-icon-box {
  padding: 4rpx 12rpx; border: 2rpx solid transparent; 
  margin-bottom: 8rpx; border-radius: 4rpx;
}
.tab-icon { font-size: 28rpx; font-weight: 900; letter-spacing: 2rpx; font-family: monospace; }
.tab-label { font-size: 20rpx; }

.tab-divider {
  width: 2rpx; height: 60%; background: #444;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
</style>